<template>
	<nut-tabbar v-model="active" class="tab-bar" safe-area-inset-bottom @tab-switch="tabSwitch">
		<nut-tabbar-item tab-title="车辆告警" name="vehicleWarning" icon="home"></nut-tabbar-item>
		<nut-tabbar-item tab-title="驶入驶出记录" name="movingInAndOut" icon="find"></nut-tabbar-item>
		<nut-tabbar-item tab-title="车辆资料" name="vehicleProfile" icon="category"> </nut-tabbar-item>
	</nut-tabbar>
</template>

<script setup>
	import {
		ref
	} from "vue"

	const page = getCurrentPages()[0]
	const active = ref(page.route.slice(page.route.lastIndexOf('/') + 1))
	const tabSwitch = ({
		name
	}) => {
		uni.reLaunch({
			url: `/pages/${name}/${name}`
		});
	}
</script>

<style scoped lang="scss">
	.tab-bar {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
	}
</style>